<template>
  <div class="analysis-table">
    <!-- <div class="name">
      <span>交叉(卡方)</span>
      <span>
        <el-select v-model="chiSquareValue" style="width: 200px">
          <el-option label="数字(占比)" value="1" />
          <el-option label="数字" value="2" />
          <el-option label="百分比" value="3" />
        </el-select>
      </span>
    </div> -->
    <div style="box-shadow: 0 0 10px #ccc; padding: 10px; margin: 10px 0; border-radius: 5px">
      <table style="width: 100%" v-if="currentData" id="score">
        <thead>
          <tr>
            <th :colspan="currentData.xOptions.length + 5">
              交叉(卡方)分析结果 
              <select class="entropyChange" v-model="selectValue" @change="selectValueChange">
                <option value="1">数字(占比)</option>
                <option value="2">数字</option>
                <option value="3">百分比</option>
              </select>
            </th>
          </tr>
          <tr>
            <th rowspan="2" colspan="1">题目</th>
            <th rowspan="2" colspan="1">名称</th>
            <th rowspan="1" :colspan="currentData.xOptions.length">{{ currentData.name }}</th>
            <th rowspan="2" colspan="1">总计</th>
            <th rowspan="2" colspan="1">χ²</th>
            <th rowspan="2" colspan="1">p</th>
          </tr>
          <tr>
            <th v-for="(i, index) in currentData.xOptions" :key="index">{{ i.optionDesc }}</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item, index) in currentData.items" :key="index">
            <tr v-for="(i, index) in item.yOptions" :key="index">
              <td v-if="index === 0" :rowspan="item.yOptions.length">{{ item.name }}</td>
              <td>{{ i.optionDesc }}</td>
              <td v-for="j in currentData.xOptions.length" :key="j">{{ item.data[index][j - 1] }}</td>
              <td>{{ item.data[index][currentData.xOptions.length] }}</td>
              <td v-if="index === 0" :rowspan="item.yOptions.length + 1">{{ item.chiValue.toFixed(2) }}</td>
              <td v-if="index === 0" :rowspan="item.yOptions.length + 1">{{ item.pValue.toFixed(2) }}</td>
            </tr>
            <tr>
              <td colspan="2">总计</td>
              <td v-for="j in item.total" :key="j">{{ j }}</td>
            </tr>
          </template>
          <tr class="lastTopBorder">
            <td :colspan="currentData.xOptions.length + 5" style="text-align: left">* p &lt;0.05 ** p &lt;0.01</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div>
      <slot name="analysis"></slot>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue-demi'

const chiSquareValue = ref('1')
const tableData = ref([])
const selectValue = ref('1')
const prop = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
const currentData = ref('')
onMounted(() => {
  console.log(prop.data)
  setData()
  setTimeout(() => {
    // tableExport('doc')
  }, 2000)
})
const selectValueChange = () => {
  setData()
}
const setData = () => {
  const data = JSON.parse(JSON.stringify(prop.data))
  data.items.forEach((item) => {
    // 最后一列合计
    item.data = item.data.map((i) => {
      const sum = i.reduce(function (prev, next, index, array) {
        return prev + next
      })
      return i.concat(sum)
    })
    item.total = []
    item.data.forEach((i) => {
      i.forEach((j, index) => {
        if (item.total[index] >= 0) {
          item.total[index] += j
        } else {
          item.total[index] = j
        }
      })
    })
    if (data.percentage == 'col') {
      if (selectValue.value == 1) {
        item.data.forEach((i) => {
          i.forEach((j, index) => {
            i[index] = `${j} (${((j / item.total[index]) * 100).toFixed(2)} %)`
          })
        })
      } else if (selectValue.value == 3) {
        item.data.forEach((i) => {
          i.forEach((j, index) => {
            i[index] = `${((j / item.total[index]) * 100).toFixed(2)} %`
          })
        })
      }
    } else if (data.percentage == 'row') {
      if (selectValue.value == 1) {
        item.data.forEach((i) => {
          i.forEach((j, index) => {
            if (index != i.length - 1) {
              i[index] = `${j} (${((j / i[i.length - 1]) * 100).toFixed(2)} %)`
            }
          })
        })
        item.total.forEach((i, index) => {
          if (index != item.total.length - 1) {
            item.total[index] = `${i} (${((i / item.total[item.total.length - 1]) * 100).toFixed(2)} %)`
          }
        })
      } else if (selectValue.value == 3) {
        item.data.forEach((i) => {
          i.forEach((j, index) => {
            if (index != i.length - 1) {
              i[index] = `${((j / i[i.length - 1]) * 100).toFixed(2)} %`
            }
          })
        })
        item.total.forEach((i, index) => {
          if (index != item.total.length - 1) {
            item.total[index] = `${((i / item.total[item.total.length - 1]) * 100).toFixed(2)} %`
          }
        })
      }
    }
  })

  console.log(data)
  currentData.value = data
}
function tableExport(type) {
  var doc = ''
  doc += '<table>'
  var html = document.getElementById('score').innerHTML
  doc += html
  doc += '</table>'
  doc += '<span style="color:red">123</span>'
  doc += '<img src="https://img-home.csdnimg.cn/images/20240627054627.png"></img>'
  var a = document.body.innerHTML
  var docFile =
    "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:" +
    a +
    "' xmlns='http://www.w3.org/TR/REC-html40'>"
  docFile =
    docFile +
    '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>' +
    doc +
    '</body></html>'
  var base64data = 'base64,' + window.btoa(unescape(encodeURIComponent(docFile)))
  if (type == 'doc') {
    window.open('data:application/msword;' + base64data)
  } else if (type == 'excel') {
    window.open('data:application/vnd.ms-excel;' + base64data)
  }
}
</script>

<style lang="scss" scoped>
.name {
  padding: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.entropyChange {
  margin-left: 10px;
  border: 1px solid #000;
  cursor: pointer;
}
</style>
<style lang="scss">
.analysis-table {
  table {
    /* width: 100%; */
    /* border: 1px solid #DDDDDD; */
    /* width: 1137px; */
    border-collapse: collapse;
    font-size: 14px;
    background-color: #fff;
    margin-bottom: 10px;
  }

  table tr {
    width: 100%;
    /* line-height: 35px; */
    height: 27px;
    /* height: 35px; */
    text-align: center;
  }

  table tr th {
    /* background: #fafafa; */
    color: #000;
    font-weight: 400;
    /* border: 1px solid #DDDDDD; */
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid;
  }

  table tr td {
    color: #000;
    /* border: 1px solid #DDDDDD; */
    /* border-bottom: 2px solid; */
  }
}
</style>
